<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <el-descriptions class="margin-top" title="订单详情" :column="3"border>
          <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                订单编号
              </template>
              {{form.orderNo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              车辆id
            </template>
            {{ form.carId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              用户名
            </template>
            {{ form.userName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              车辆名称
            </template>
            {{ form.carName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              汽车品牌
            </template>
            {{ form.brand }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              汽车年限
            </template>
            {{ form.oldYear }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              过户次数
            </template>
            {{ form.guohuCount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              汽车型号
            </template>
            {{ form.model }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              公里数
            </template>
            {{ form.kilometers }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              评分
            </template>
            {{ form.star }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              起拍价格
            </template>
            {{ form.startPrice }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              加价金额
            </template>
            {{ form.addPrice }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              车源地
            </template>
            {{ form.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              支付方式
            </template>
            {{ form.way }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              创建时间
            </template>
            {{ form.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              修改时间
            </template>
            {{ form.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              备注信息
            </template>
            {{ form.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              图片展示
            </template>
              <div class="image" style="margin-left: 20px">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="form.url"
                  :preview-src-list="form.srcList">
                </el-image>
              </div>
          </el-descriptions-item>
        </el-descriptions>
<!--        <el-descriptions title="订单详情" direction="vertical" :column="4" border>-->
<!--          <el-descriptions-item label="订单编号">{{form.orderNo}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="车辆id">{{ form.carId }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="用户名">{{ form.userName }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="车辆名称">{{ form.carName }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="汽车品牌">{{ form.brand }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="汽车年限">{{form.oldYear}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="过户次数">{{ form.guohuCount }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="汽车型号">{{ form.model }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="公里数">{{ form.kilometers }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="评分">{{ form.star }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="起拍价格">{{ form.startPrice }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="加价金额">{{ form.addPrice }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="地址">{{ form.address }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="支付方式">{{ form.way }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="类型">{{ form.type }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="修改时间">{{ form.updateTime }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="备注信息">{{ form.remark }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="图片">-->
<!--            <div class="image" style="margin-left: 20px">-->
<!--              <el-image-->
<!--                style="width: 100px; height: 100px"-->
<!--                :src="form.url"-->
<!--                :preview-src-list="form.srcList">-->
<!--              </el-image>-->
<!--            </div>-->
<!--          </el-descriptions-item>-->
<!--        </el-descriptions>-->
        <el-button type="primary" @click="backToOrder()" style="margin-top: 10px">返回</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {getOrder} from "@/api/scp/order";
export default {
  name:"orderDetail",
  data() {
    return {
      form: {
        orderNo:"",
        carId:"",
        userName:"",
        carName:"",
        brand:"",
        model:"",
        oldYear:"",
        guohuCount:"",
        kilometers:"",
        star:"",
        startPrice:"",
        addPrice:"",
        way:"",
        address:"",
        type:"",
        startTime:"",
        endTime:"",
        remark:"",
        createTime:"",
        updateTime:"",
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      },
    }
  },

  created() {
    this.init()
  },
  methods:{
    init(){
      var orderId = this.$route.query.orderId
      getOrder(orderId).then(res=>{
        console.log(res.data)
        this.form = res.data.orderDetail
        this.form.orderNo = res.data.order.orderNo
        this.form.way = res.data.order.way
        this.form.userName = res.data.order.userName
        this.form.oldYear = res.data.car.oldYear
        this.form.guohuCount = res.data.car.guohuCount
        this.form.model = res.data.car.model
        this.form.kilometers = res.data.car.kilometers
        this.form.star = res.data.car.star
        this.form.brand = res.data.car.brand

        this.form.url = "http://101.42.14.198:9000" + res.data.car.image
        this.form.srcList = "http://101.42.14.198:9000" + res.data.car.image
      })
    },
    resetOrderForm(){
      this.form = {
        orderNo:"",
        carId:"",
        userName:null,
        carName:"",
        brand:"",
        model:"",
        oldYear:"",
        guohuCount:"",
        kilometers:"",
        star:"",
        startPrice:"",
        addPrice:"",
        way:"",
        address:"",
        type:"",
        startTime:"",
        endTime:"",
        remark:"",
        createTime:"",
        updateTime:"",
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    },
    backToOrder(){
      this.$router.back()
  }
}
}
</script>

<style>
.el-descriptions-item{
  height: 500px !important;
}
</style>
